<script>
const systemName = process.env.VUE_APP_TITLE

export default {
  name: 'ProLogo',
  functional: true,
  props: {
    to: String
  },
  render(h, { data, props }) {
    return (
      <div class="pro-logo" { ...data }>
        <router-link class="pro-logo-link" to={ props.to || {} }>
          <img src={ require('@/assets/logo.png') } alt="logo" />
          <h1>{ systemName }</h1>
        </router-link>
      </div>
    )
  }
}
</script>

<style lang="less">
.pro-logo {
  @layout-header-height: 64px;

  display: flex;
  align-items: center;
  height: @layout-header-height;

  @line-height: @layout-header-height - @padding-md * 2;

  &-link {
    display: flex;
    width: 100%;
    min-height: @line-height;
    padding: @padding-md @padding-lg;

    .box-center();
  }

  img {
    display: inline-block;
    height: @line-height;
    vertical-align: middle;
  }

  h1 {
    display: inline-block;
    height: @line-height;
    line-height: @line-height;
    margin: 0 0 0 @padding-sm;
    color: @menu-dark-highlight-color;
    font-weight: 600;
    font-size: 18px;
    .text-elip();
  }

  &.in-header {
    background-color: @menu-dark-highlight-color;

    h1 {
      line-height: @line-height;
      color: @text-color;
    }

    .screen-xs & {

      .pro-logo-link {
        padding-right: @padding-md / 2;
        padding-left: 2px;
      }

      h1 {
        display: none;
      }
    }
  }

  .ant-layout-sider-collapsed & {

    &-link {
      padding: @padding-md @padding-xs;
    }

    h1 {
      display: none;
    }

  }
}
</style>
